
<template>
  <card class="strpied-tabled-with-hover" body-classes=" table-responsive">
    <template slot="header">
      <h4 class="card-title">管理员信息</h4>
      <p class="card-category"></p>
    </template>

    <div style="margin-top: 15px;">
      <div class="search">
        <el-input placeholder="请输入内容" v-model="searchData" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="管理员姓名" value="1"></el-option>
            <el-option label="停车场地址" value="2"></el-option>
            <el-option label="权限" value="3"></el-option>
          </el-select>
          <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      :data="list"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      row-key="id"
    >
      <el-table-column prop="number" label="工号" width="180"></el-table-column>
      <el-table-column prop="username" label="管理员姓名" width="180"></el-table-column>
      <el-table-column type="expand" prop="area" width="180" label="所管理的停车场">
        <template slot-scope="scope">
          <el-table :data="scope.row.area">
            <el-table-column prop="area" label="名称" sortable align="center">
              <template slot-scope="scope">
                <span>{{scope.row.title}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="权限"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="changeIT(scope.row)">修改权限</el-button>
          <el-button type="text" @click="deleteIT(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="row">
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 2,5, 10]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      <el-button type="success" @click="addManager()" class="col-2">增加管理员</el-button>
    </div>
    <el-dialog title="修改管理员权限" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="权限" >
          <el-select v-model="form.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="您的密码" prop="pass">
          <el-input type="password" v-model="form.admin_password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeRole()">确 定</el-button>
      </div>
    </el-dialog>
  </card>
</template>
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<script>
import LTable from "src/components/Table.vue";
import Card from "src/components/Cards/Card.vue";

export default {
  components: {
    LTable,
    Card
  },
  data() {
    return {
      select: "",
      searchData: "",
      tableData: [],
      form: {
        id: "",
        role: "",
        admin_password: ""
      },
      dialogFormVisible: false,
      options: [
        {
          value: 2,
          label: "停车场业主管理员"
        },
        {
          value: 3,
          label: "停车场租赁承包管理员"
        }
      ],
       list: [],
      area: [],
      data: [],
      limit: 5,
      total: null,
      page: 1,
    };
  },
  created: function() {
    this.getManager();
  },
  methods: {
    changeRole() {
      this.dialogFormVisible = false;
      this.$ajax({
        method: "put",
        url: "/admin/role",
        data:this.form,
      })
        .then(res => {
          this.$message({
            type: "success",
            message: "修改权限成功!"
          });
           this.$router.go(0);
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: error
          });
        });
    },
    getManager() {
      this.$ajax({
        method: "get",
        url: "/admin/role"
      })
        .then(res => {
         this.list = res.data.data;
          this.data =this.list;
          this.getList();
        })
        .catch(error => {
        this.$message({
                type: "info",
                message:"您没有权限访问该页面"
         });
        });
    },
    changeIT(row) {
      this.form.id = row.id;
      this.dialogFormVisible = true;
    },
    deleteIT(row) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteManager();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteManager() {
      alert("you delete");
    },
    addManager() {
      this.$router.push("/admin/manager");
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
      getList() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.data.filter((item, index) =>
        item.username.includes(this.searchData)
      );
      this.list = list.filter(
        (item, index) =>
          index < this.page * this.limit &&
          index >= this.limit * (this.page - 1)
      );
      this.total = list.length;
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getList();
    },
    // 当当前页改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getList();
    },
    // 搜索过滤数据
    search() {
      this.page = 1;
      this.getList();
    }
  }
};
</script>